<template>
	<div class="app-container">
		<div class="wx-user-box" style="padding: 0 20px;">
			<div class="wx-user-title">门禁设备品牌</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<!-- <el-form-item label="设备名称">
						<el-input @change="search" clearable v-model="formInline.make_name" placeholder="请输入"></el-input>
					</el-form-item> -->
					<el-form-item>
						<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
						<el-button type="success" @click="openAdd()" icon="el-icon-circle-plus-outline">添加设备品牌</el-button>
					</el-form-item>
				</el-form>
				<!-- 列表 -->
				<el-table :data="list" style="width: 100%;">
					<el-table-column prop="index" label="NO">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column prop="make_name" label="品牌名称" />
					<el-table-column prop="createtime" label="创建时间" />
					<el-table-column label="操作" min-width="130px">
						<template slot-scope="scope">
							<el-button size="mini" @click="setItem(scope.row)">编辑</el-button>
							<el-button size="mini" @click="showList(scope.row)">查看类型</el-button>
							<el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button>
                            
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<div class="page-block" style="margin-top: 20px;">
					<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalRow" :pager-count="pageCount"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>

			</div>
		</div>

		<el-dialog :title="form.old_id ? '编辑设备品牌':'添加设备品牌'" :visible.sync="dialogVisible" width="500px" center
			@close="reset('form')">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px">
				
				<el-form-item label="设备品牌名称" prop="make_name">
					<el-input style="width:280px;" placeholder="请输入" v-model="form.make_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reset('form')">取 消</el-button>
				<el-button type="primary" @click="saveOrUpdate('form')">确 定</el-button>
			</span>
		</el-dialog>
        <!-- <el-dialog  :title="subData.make_name"  :visible.sync="shows" width="1000px">
            <sub-type v-if="shows" :subData="subData"></sub-type>
        </el-dialog> -->
	</div>
</template>
<script>
	import Api from '@/api/pages/entrance-guard/index.js';
    import subType  from "./device-sub-type.vue";
	export default {
		name: 'deviceList',
        components: {
            subType
        },

		data() {
			return {
                subData:{},
                shows:false,
				dialogVisible: false,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 50], // 个数选择器
				currentPage: 1, // 当前页码
				totalRow: 0,
				formInline: {
					make_name: '',
				},
				form: {},
				rules: {
					
					make_name: [{
						required: true,
						message: '请输入品牌名称',
						trigger: 'change'
					}],
				},
				list: [],
				page: 1,
				size: 10,
				states: false,
				mult: [],
				agentList:[],
				xiaoqus: []
			};
		},
		mounted() {
			this.getData();
		},
		methods: {
		
			handleSizeChange(val) {
				this.size = val;
				this.page = 1;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getData();
			},

			// 查询
			search() {
				this.page = 1;
				this.getData();
			},

			// 列表选择
			handleSelectionChange(val) {
				this.mult = val;
				// console.log(val)
			},

			// 获取数据
			getData() {
				let data = {
					pageNumber: this.page,
					pageSize: this.size,
				
				};
				Api.accessMakeQuery(data).then(res => {
					if (res.state) {
						this.list = res.data.list;
						this.totalRow = res.data.totalRow;
					} else {
						this.$message.error(res.msg);
					}
				});
			},

			// 删除
			del(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Api.accessMakeDel({
						id: id
					}).then(res => {
						if (res.state) {
							this.$message({
								message: res.msg,
								type: "success"
							});
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				}).catch(() => {});
			},

			// 编辑
			setItem(item) {
				this.form = {
                    make_name:item.make_name,
                    id:item.id
				};
				// console.log(this.form)
				this.dialogVisible = true;
			},
            showList(item){
              
                this.$router.push({
					path: '/entrance-guard/deviceSubType',
					query: {
						makeId: item.id,
					}
				});
            },
			// 添加
			openAdd() {
				this.initData();
				this.dialogVisible = true;
			},

			reset(formName) {
				this.initData();
				this.$refs[formName].resetFields();
				this.dialogVisible = false;
			},

			// 初始化数据
			initData() {
				this.form = {
					make_name:'',
                    id:'',
				};
			},

			// 保存与修改
			saveOrUpdate(formName, type) {
				this.$refs[formName].validate(async (valid) => {
					if (valid) {
							this.save()
					}
				});
			},
			
			save(){
				Api.accessMakeSave(this.form).then((res) => {
					this.callback(res);
				});
			},
			
			Update(datas){
				Api.deviceUpdate(datas).then((res) => {
					this.callback(res);
				});
			},
			
			callback(res){
				if (res.state) {
					this.$message({
						message: res.msg,
						type: "success"
					});
					this.getData();
					this.reset('form');
				} else {
					this.$message.error(res.msg);
				}
			},

		}
	};
</script>

<style lang="scss" scoped>
	.page-block {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-groups {
		.fl {
			display: block;
			margin-left: 0px !important;
			margin-top: 10px;
		}

		.fl:first-child {
			margin-top: 0;
		}
	}
</style>
<style lang="scss">
	.el-popover {
		min-width: 80px !important;
	}
</style>
